<template>
  <el-container class="school-model index-model">
    <el-header class="row eheader">
      <div class="col">
        <label class>班级名称</label>
        <input class="rounded" v-model.lazy="clazz" />
      </div>
    </el-header>
    <el-main style="overflow: visible;">
      <calendars class="calendars" v-bind="{datas, timek,calendarclick,Monthclick}"></calendars>
    </el-main>
    <el-dialog title="查看" :visible.sync="outerVisible">
      <table class="table table-bordered">
        <tr>
          <th scope="row">上课时间</th>
          <td>{{watchdata.data.上课时间}}</td>
        </tr>
        <tr>
          <th scope="row">班级</th>
          <td>{{watchdata.title }}</td>
        </tr>
        <tr>
          <th scope="row">教室</th>
          <td>{{watchdata.classban}}</td>
        </tr>
        <tr>
          <th scope="row">教师</th>
          <td>{{watchdata.data.教师 }}</td>
        </tr>
        <tr>
          <th scope="row">助教</th>
          <td>{{watchdata.data.助教}}</td>
        </tr>
        <tr>
          <th scope="row">课程内容</th>
          <td>{{watchdata.data.课程内容}}</td>
        </tr>
      </table>
    </el-dialog>
  </el-container>
</template>

<script>
/* eslint-disable no-unused-vars */
import { mapGetters } from "vuex";
import calendars from "../../../../components/xiaofei/calendars.vue";
import { asynccheckconflictsschoolclazzschedule } from "../../../../plugins/api.js";
import { isinclass } from "../../../utils.js";
import moment from "moment";
export default {
  name: "myclassrecords",
  data() {
    return {
      timek: Math.round(new Date()),
      watchdata: {
        data: {}
      },
      outerVisible: false,
      typede: 1,
      clazz: "",
      getschoolclazzschedule: []
    };
  },
  props: {
    student: {
      type: Object,
      default: () => {
        return {
          ID: "",
          accessToken: null,
          birthday: "",
          createdAt: null,
          deleted: null,
          headimg: "",
          lastlogintime: null,
          name: "",
          password: "",
          phonenum: null,
          publicopenid: null,
          relationship: "",
          schooladdressid: null,
          sex: "",
          smallopenid: null,
          type: "",
          unionid: null,
          updatedAt: null
        };
      }
    },
    myschoolclazz: {
      type: Array,
      default: () => []
    },
    totime: {
      type: Function,
      default: () => ""
    }
  },
  mounted() {
    this.start();
  },
  computed: {
    ...mapGetters([
      "getschooladdress",
      "getschoolclassroom",
      "getschooluser",
      "getschoolclazz",
      "getschoolclasstime"
    ]),
    datas() {
      const { clazz, getschoolclazz, myschoolclazz, usernameids } = this;
      let arr;
      arr = myschoolclazz
        .filter(v => {
          return v.schoolclazz.name.toLowerCase().includes(clazz.toLowerCase());
        })
        .map(v => v.schoolclazzid);
      return this.getschoolclazzschedule
        .filter(v => {
          const { schoolclazzid, starttime } = v;
          let x = arr.includes(v.schoolclazzid);
          if (x) {
            return myschoolclazz.find(vo => {
              if (vo.schoolclazzid == schoolclazzid) {
                if (vo.type !== "在读") {
                  return (
                    vo.updatedAt > starttime &&
                    new Date(vo.createdAt).getTime() - 1000 * 3600 * 24 <
                      new Date(starttime).getTime()
                  );
                } else {
                  // 获取现在在读的人是否
                  return (
                    new Date(vo.createdAt).getTime() - 1000 * 3600 * 24 <
                    new Date(starttime).getTime()
                  );
                }
              }
            });
          }
          return false;
        })
        .map(v => {
          const {
            ID,
            schooluserid,
            schoolclassroomid,
            info,
            schoolclazzid,
            schooluserids,
            starttime,
            schoolclasstime
          } = v;
          let color = "#409EFF";
          let size = "#FFFFFF";

          const 教师 = usernameids(schooluserid);

          const 助教 = usernameids(schooluserids);

          const 班级 = getschoolclazz.find(vo => vo.ID == schoolclazzid).name;
          const 教室 = this.getschoolclassroom.find(
            vo => vo.ID == schoolclassroomid
          ).name;
          const 上课时间 = `${new Date(
            starttime
          ).toLocaleDateString()}  ${schoolclasstime}`;
          return {
            start: starttime,
            color,
            size,
            title: 班级,
            schooltime: schoolclasstime,
            classban: 教室,
            key: ID,
            data: {
              教师,
              助教,
              课程内容: info,
              上课时间
            }
          };
        });
    },
    schoolteacher() {
      let { schooladdressid } = this;
      return this.getschooluser.filter(v => {
        if (v.isteacher == 1) {
          if (v.classscope == "*") {
            return true;
          } else {
            let x = v.classscope.split(",");
            if (x.includes(schooladdressid.toString())) {
              return true;
            }
          }
        }
      });
    },
    schoolclassroom() {
      return this.getschoolclassroom.filter(v => {
        if (this.schooladdressid) {
          return true;
        } else {
          return v.schooladdressid == this.schooladdressid ? true : false;
        }
      });
    },
    getTime() {
      const { timek, typede } = this;
      let starttime = new Date(timek);
      let endtime = new Date();

      if (typede === 1) {
        // 周
        starttime = moment(timek)
          .day(-1)
          .format();
        endtime = moment(timek)
          .day(6)
          .format();
      } else if (typede === 2) {
        // 日
        starttime = new Date(timek - 1000 * 3600 * 24);
        endtime = new Date(timek + 1000 * 3600 * 24);
      } else {
        starttime = moment(timek)
          .date(-7)
          .format();
        endtime = moment(timek)
          .date(40)
          .format();
      }
      return {
        starttime,
        endtime
      };
    }
  },
  watch: {
    timek() {
      this.start();
    },
    typede() {
      this.start();
    }
  },
  methods: {
    async start() {
      this.getschoolclazzschedule = await asynccheckconflictsschoolclazzschedule(
        {
          starttime: this.getTime.starttime,
          endtime: this.getTime.endtime
        }
      );
    },
    classroom(ID) {
      if (ID) {
        let { schooladdressid } = this.getschoolclazz.find(v => v.ID == ID);
        return this.getschoolclassroom.filter(
          v => v.schooladdressid == schooladdressid
        );
      }
      return [];
    },
    user(ID) {
      if (ID) {
        let { schooladdressid } = this.getschoolclazz.find(v => v.ID == ID);
        return this.getschooluser.filter(v => {
          if (v.state) return;
          if (v.isteacher == 1) {
            if (v.classscope == "*") {
              return true;
            } else {
              let x = v.classscope.split(",");
              if (x.includes(schooladdressid.toString())) {
                return true;
              }
            }
          }
        });
      }
      return [];
    },
    calendarclick(v) {
      const data = this.getschoolclazzschedule.find(vo => vo.ID == v.key);
      this.watchdata = v;
      const u = JSON.parse(JSON.stringify(data));
      this.ruleForm = u;
      this.ruleForm.schooluserids = u.schooluserids;

      this.outerVisible = true;
    },
    Monthclick(v, c) {
      this.typede = c;
      this.timek = v.unix() * 1000;
    },
    usernameids(id) {
      if (id) {
        const data = this.getschooluser.find(v => v.ID == id);
        return data ? data.name : "";
      }
      return "";
    }
  },
  components: {
    calendars
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
  .eheader {
    padding-top: 15px;
    .col {
      text-align: center;
    }
    label {
      display: inline-block;
      padding-left: 25px;
      padding-right: 25px;
    }
  }
  .text123 {
    margin-right: 10px;
  }
  .calendars {
    margin-top: -35px;
  }
}
</style>